<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div class="app">
        <!-- 1 .stop:停止冒泡 -->
        <div @click="divClick">divdiv
          <button @click.stop="btnClick">按钮</button>
        </div>
      
        <!-- 2. .prevent:阻止默认行为 -->
        <form action="baidu" method="post">
          <input type="submit" value="提交" @click.prevent="submitClick">
        </form>
      
        <!-- 3. .enter:监听enter按键 -->
        <input type="text" @keyup.enter="enterClick">
      
        <!-- 4. .once:点击回调只会触发一次 -->
        <button @click.once="btnClick2">按钮2</button>
      
      </div>
      <script src="../vue.js"></script>
      <script>
        const app = new Vue({
          el: '.app',
          data: {
            counter: 0
          },
          methods: {
            btnClick() {
              console.log("btnClick...")
            },
            divClick() {
              console.log("divClick...")
            },
            submitClick() {
              console.log("submitClick...")
            },
            enterClick() {
              console.log("enterClick...")
            },
            btnClick2() {
              console.log("btnClick2...")
            }
          }
        })
      </script>

    
</body>
</html>